<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0%;
            padding: 0%;
        }
        table thead{
            background-color: skyblue;
        }
        table {
            /* 边框 */
            text-align: center;
            width: 300px;
            height: 300px;
            border: 2px solid rgb(140 140 140);;
            border-collapse: collapse;
            border-spacing: 11px;
            font-family: sans-serif;
            letter-spacing: 1px;
            margin: 100px auto;

        }
        td {
            border: 1px solid black ;
            padding: 8px;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <th><input type="checkbox" name="" id=""></th>
            <th>商品</th>
            <th>价格</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="" id="" ></td>
                <td> Apple Watch</td>
                <td>2000 </td> 
            </tr>
            <tr>    
                <td><input type="checkbox" name="" id=""></td>
                <td>IPone8</td>
                <td>8000</td>
            </tr>
            <tr>  
                <td><input type="checkbox" name="" id=""></td>
                <td>IPad Pro</td>
                <td>5000</td>
            </tr>
          
            <tr> 
                <td><input type="checkbox"  name="" id=""></td>
                <td>IPad Air</td>
                <td>2000</td>
            </tr>
        </tbody>
        <script>
            const all = document.querySelector('table thead th input');
            console.log(all);
            const ones = document.querySelectorAll('table tbody input');
            console.log(ones);

            // 若选中全选,则所有单选也要选中
            all.addEventListener('click',()=>{
                // console.log(all.checked);
                if(all.checked){
                    for(let i = 0;i < ones.length;++i){
                        ones[i].checked = true;
                    }
                }else{
                    for(let i = 0;i < ones.length;++i){
                        ones[i].checked = false;
                    }
                }
            });
            // 当所有的单选都选中后,全选也需要勾选

            for(let i = 0;i < ones.length;++i){
                ones[i].addEventListener('click',()=>{
                    let count = 0;
                    for(let i = 0;i < ones.length;++i){
                        if(ones[i].checked) ++count;
                    }
                    if(count == ones.length){
                        all.checked = true;
                    }else{
                        all.checked = false;
                    }
                });
            }
        </script>
    </table>
</body>
</html>